<template>
	<div style="height: 100%;width: 100%;display: flex;flex-direction: column;">
		<ElTable :data="lineData" :header-cell-style="{color: '#ffffff',background: '#6f7f93'}"
				 class="table_border"
				 :highlight-current-row="false">
			<ElTableColumn prop="routeId" label="航线id"></ElTableColumn>
			<ElTableColumn prop="routeName" label="航线名称"></ElTableColumn>
			<ElTableColumn prop="routeType" label="航线类型"></ElTableColumn>
			<ElTableColumn label="航线数据">
				<template slot-scope="scope" style="display: flex;flex-direction: row; flex-wrap: nowrap;">
					<el-button @click="handlePass(scope.row)" type="text" size="small">查看</el-button>
				</template>
			</ElTableColumn>
			<ElTableColumn label="操作">
				<template slot-scope="scope" style="display: flex;flex-direction: row; flex-wrap: nowrap;">
					<el-button @click="handleReject(scope.row)" type="danger" size="small">删除</el-button>
				</template>
			</ElTableColumn>
		</ElTable>

		<el-pagination
				background
				layout="prev, pager, next, jumper, ->, total"
				:currentPage="queryTerms.currentPage"
				:page-size="queryTerms.size"
				:total="queryTerms.total"
				@current-change="handleCurrentChange"
				style="text-align: center;"/>

		<el-dialog title="航线数据" :visible.sync="routeDataVis" width="40%">
			<span>{{routeData}}</span>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="routeDataVis = false">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import webSetInfo from "../server/webSetInfo";

	export default {
		data() {
			return {
				lineData: [],
				userInfo: {},
				totalNumber: 0,

				routeDataVis: false,
				routeData: null,
				queryTerms: {
					currentPage: 1,
					pageSize: 10,
					total: 0,
				},
			}
		},
		mounted() {
			this.userInfo = this.$store.state.userAllInfos;
			if (this.userInfo == null) {
				this.$router.push({
					path: '/login'
				})
			} else {
				this.getRouterLine();
			}
		},
		methods: {
			getRouterLine() {
				this.$axios_token({
					url: `${webSetInfo.apiUrl}` + '/route/selectLine',
					method: "post",
					data: {
						pageSize: this.queryTerms.pageSize,
						pageNo: this.queryTerms.currentPage
					}
				}).then(res => {
					let data = res.data;
					if (res.code === 200 && data.total > 0) {
						this.loadData(data)
					}
				})
			},

			loadData(e) {
				this.lineData = e.records;
				this.queryTerms.currentPage = parseInt(e.current);
				this.queryTerms.pageSize = parseInt(e.size);
				this.queryTerms.total = parseInt(e.total);
			},

			handleCurrentChange(e) {
				this.queryTerms.currentPage = e;
				this.getRouterLine();
			},
			handlePass(e) {
				this.routeData = e.routeData
				this.routeDataVis = true
			},
			async handleReject(e) {
				await this.$axios_token({
					url: `${webSetInfo.apiUrl}` + `/route/deleteLine`,
					method: "post",
					data: {
						userId: this.userInfo.userId,
						routeId: e.routeId
					}
				}).then(res => {
					let data = res.data
					if (res.code == 200 && data) {
						this.$message({
							message: '删除成功',
							type: 'success'
						});
						//重新加载
						this.$nextTick(() => {
							this.getRouterLine();
						})
					} else {
						this.$message.error("未知错误")
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>

	.pagination {
		position: fixed;
		right: 30px;
		bottom: 0;
		margin-bottom: 19px;

		:deep(.el-icon) {
			font-size: 19px !important;
		}

		:deep(.el-input__inner) {
			color: #4a4a4a;
		}

		:deep(.el-pagination .el-pager li) {
			color: #4a4a4a;
			font-size: 16px;
			background: none;
		}

		:deep(.el-pagination button) {
			background: none;
		}

		:deep(.el-input__wrapper) {
			background: none;
			border: 1px solid #4a4a4a;
			box-shadow: none;
		}

		:deep(.el-pagination__total) {
			color: #2871ff;
		}

		:deep(.el-pagination__jump) {
			color: #4a4a4a;
		}

	}

	.patient-pagination {
		height: 1rem;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;

		/deep/ .el-pager li {
			display: inline-flex;
			justify-content: center;
			align-items: center;
		}

		/deep/ .el-pagination.is-background .btn-prev:disabled, /deep/ .el-pagination.is-background .btn-next:disabled {
			* {
				color: #9aa1af !important;
			}
		}

		/deep/ .el-pagination .btn-prev .el-icon, /deep/ .el-pagination .btn-next .el-icon {
			color: #3795e1 !important;
		}

	}
</style>
